
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!--cdn google-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


  <!--bootstrap validation-->
  <!--
  <script src="<?php echo base_url();?>/js/jqBootstrapValidation.js"></script>
  -->

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
  

 <!-- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script> -->

<!--
  <script>
    $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
  </script>
-->

  <script type="text/javascript">

    if (jQuery.validator) {
      jQuery.validator.setDefaults({
        debug: true,
        errorClass: 'has-error',
        validClass: 'has-success',
        ignore: "",
        highlight: function (element, errorClass, validClass) {
          $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
          $(element).closest('.form-group').find('.help-block').text('');
        },
        errorPlacement: function (error, element) {
          $(element).closest('.form-group').find('.help-block').text(error.text());
        },
        submitHandler: function (form) {
          if ($(form).valid()) {
            form.submit();
          }
        }
      });
}
</script>


</head>
<body>

  <div class="row">

    <div class="col-lg-2"></div>
    <div class="col-lg-8">

     <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Sign In</h3>
      </div>
      <div class="panel-body">
        <p class="lead">Please sign in using your username and password to proceed.</p>

        <form id="LoginForm" role="form" class="form-horizontal" autocomplete="off" action="#" method="post">

          <div class="form-group">
            <label class="control-label col-sm-3 col-md-3" for="Username">Username:</label>
            <div class="col-md-5 col-xm-6">
              <input type="text" class="form-control" id="Username" name="Username" placeholder="Username" value="" required="required" />
              <span class="help-block"></span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3 col-md-3" for="Password">Password:</label>
            <div class="col-md-5 col-xm-6">
              <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" required="required" />
              <span class="help-block"></span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-3 col-md-3" for="Username">Email:</label>
            <div class="col-md-5 col-xm-6">
              <input type="email" class="form-control" id="Email" name="email" placeholder="email" value="" required="required" />
              <span class="help-block"></span>
            </div>
          </div>


          <div class="form-group">
            <div class="col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-md-9">
              <button id="SubmitBtn" name="SubmitBtn" type="submit" class="btn btn-large btn-primary">Sign in</button>
            </div>
          </div>

        </form>

      </div>
    </div>

  </div>

</div>

<script type="text/javascript">

  $(document).ready(function () {
    var Username = $("#Username");
    var Password = $("#Password");

    var Email = $("#Email");

    var LoginForm = $('#LoginForm');
    var SubmitBtn = $('#SubmitBtn');

    LoginForm.validate();

    Username.rules("add", {
      required: true,
      rangelength: [3, 20],
      messages: {
        required: "You must provide your username.",
        rangelength: "The user name must be between 3 and 20 characters in length."
      }
    });

    Password.rules("add", {
      required: true,
      messages: {
        required: "You must provide your password."
      }
    });

    Email.rules("add", {      
      required: true,
      messages: {
        required: "You must provide your email."
      },
      email: true,
      messages: {
        email: "this must is email"
      }
    });

$('#LoginForm').submit(function () {
  if ($(this).valid()) {
    $('#SubmitBtn').prop('disabled', true);
    return true;
  }
  return false;
});

});

</script>

</body>
</html>